<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('数据源详情')" />
</head>
<body>
<form class="layui-form" th:object="${dataInfo}">
    <div class="mainBox">
        <div class="main-container">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" th:field="*{name}" placeholder="请输入连接名" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">主机：</label>
                <div class="layui-input-block">
                    <input type="text" name="host" th:field="*{host}" placeholder="请输入主机" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">端口：</label>
                <div class="layui-input-block">
                    <input type="text" name="port" th:field="*{port}" placeholder="请输入端口" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">库名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="serviceName" th:field="*{serviceName}" placeholder="请输入服务名" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">库类型：</label>
                <div class="layui-input-block">
                    <select name="type" lay-verify="required" dict-code="DB_TYPE" th:attr="default-value=*{type}" >
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">驱动类名：</label>
                <div class="layui-input-block">
                    <input type="text" name="driverClassName" th:field="*{driverClassName}" placeholder="请输入驱动类名" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-block">
                    <input type="text" name="username" th:field="*{username}" placeholder="请输入用户名" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-block">
                    <input type="text" name="password" th:field="*{password}" placeholder="请输入密码" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">其他参数：</label>
                <div class="layui-input-block">
                    <input type="text" name="otherParam" th:field="*{otherParam}" placeholder="请输入其他参数" class="layui-input" />
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
<!--            <button class="pear-btn pear-btn-primary pear-btn-sm" lay-submit lay-filter="btn-test">-->
<!--                <i class="layui-icon layui-icon-link"></i>  连接测试-->
<!--            </button>-->
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit lay-filter="btn-save">
                <i class="layui-icon layui-icon-ok"></i>  提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>  重置
            </button>
        </div>
    </div>
</form>
</body>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    layui.use(['form', 'jquery','laydate','dictionary'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;

        // 测试链接
        form.on('submit(btn-test)', function (data) {
            $.ajax({
                url: '/meta/dataSource/linkTest',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.success) {
                        layer.msg('连接成功', {icon: 1, time: 1000});
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
        });

        // 数据提交
        form.on('submit(btn-save)', function (data) {
            $.ajax({
                url: '/meta/dataSource/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload("data-table");
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });
    });
</script>
</html>